<template>
  <a-drawer :title="title" v-model:open="open" :width="420">
    <a-form :model="form" 
            ref="formRef" 
            :rules="rules" 
            :label-col="formCol.labelCol" 
            :wrapper-col="formCol.wrapperCol">
      <a-form-item label="字段名称" name="name">
        <a-input v-model:value="form.name" placeholder="请输入字段名称" />
      </a-form-item>
      <a-form-item label="字段类型" name="field_type">
        <a-select v-model:value="form.field_type" placeholder="请选择字段类型" :options="fieldOptions"/>
      </a-form-item>
      <a-form-item label="预选值" 
                   name="value" 
                   :rules="[{required:form.field_type==='select'|| form.field_type ==='checkbox' ||form.field_type === 'radio' ,message:'请输入预选值'}]"
                   help="输入预选值，使用Enter键分隔" 
                   v-if="form.field_type==='select' || form.field_type==='radio' || form.field_type==='checkbox'">
          <a-select mode="tags" 
                    v-model:value="form.value" 
                    placeholder="请输入预选值" 
                    name="value" 
                    :open="false"/>
      </a-form-item>
       <a-form-item label="长度限制" 
                    name="min" 
                    v-if="form.field_type==='text' || form.field_type==='textarea' || form.field_type==='number'">
        <a-space>
            <a-input-number :min="0" 
                            :controls="false" 
                            v-model:value="form.min" 
                            :style="width.xs" 
                            placeholder="最小值" 
                            name="min"/>
            <span>~</span>
            <a-form-item-rest>
              <a-input-number :min="0" 
                              :controls="false"
                              v-model:value="form.max" 
                              :style="width.xs" 
                              placeholder="最大值" 
                              name="max" />
            </a-form-item-rest>
        </a-space>
      </a-form-item>
      <a-form-item label="默认提示" name="placeholder">
        <a-input v-model:value="form.placeholder" placeholder="请输入空白提示词(选填)" name="placeholder" />
      </a-form-item>
      <a-form-item label="是否必填" name="required">
          <a-radio-group v-model:value="form.required" name="required">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
      </a-form-item>
      <a-form-item label="是否启用" name="status">
          <a-radio-group v-model:value="form.status" name="status">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-flex justify="end" gap="middle">
        <a-button @click="open = false">取消</a-button>
        <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
      </a-flex>
    </template>
  </a-drawer>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue';
import { computed, reactive, ref, watch } from 'vue';
import { formCol,width } from '@/config';
import useMessage from '@/hooks/useMessage';
import { createFields, updateFields } from '@/server/modules/fields';
import { hasPermission } from '@/hooks';

const {dataItem} = defineProps<{dataItem?: FieldsType}>()
const open = defineModel<boolean>('open')
const emits = defineEmits(['ok'])
const loading = ref(false)
const title = computed(()=>{
  return dataItem?.id ? '编辑字段' : '添加字段'
})

const formRef = ref<FormInstance>()
const form =reactive<FieldsTypeForm>({
  id: 0,
  name: '',
  field_type:'text',
  value:[],
  required: 1,
  status:1,
  min: 0,
  max:200,
  show_count:1,
})
const rules = {
  name: [{ required: true, message: '请输入字段名称', trigger: 'blur' },],
  form_type: [{ required: true, message: '请选择字段类型', trigger: 'change' },]
}
const fieldOptions:{label:string,value:FieldsTypesType}[] = [
  {label:'文本',value:'text'},
  {label:'多行文本',value:'textarea'},
  {label:'数字',value:'number'},
  {label:'日期',value:'date'},
  {label:'时间',value:'datetime'},
  {label:'下拉框',value:'select'},
  {label:'单选框',value:'radio'},
  {label:'多选框',value:'checkbox'},
]
watch(()=>dataItem, (val)=>{
  if (val?.id) {
    Object.assign(form, val)
  }else{
    Object.assign(form, {
      id: 0,
      name: '',
      field_type:'text',
      value:[],
      required: 1,
      status:1,
      min: 0,
      max:200,
      show_count:1,
    })
  }
},{ immediate: true })
const onSubmit = async() => {
  if(!hasPermission('create') && !hasPermission('update')) return
  try {
   loading.value = true
   await formRef.value?.validate()
   let res = await ( form.id ? updateFields(form.id,form) : createFields(form))
   if(res.code === 200){
      open.value = false
     emits('ok')
   }
   useMessage(res.code,res.message)
  }catch{
    return useMessage(403,'请检查表单数据')
  }finally{ 
    setTimeout(()=>{
      loading.value = false
    },1000)
  }
}
</script>

<style scoped>

</style>